<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
    @close="close"
  >
    <el-form ref="formRef" :model="form" :rules="rul" label-width="80px">
      <el-form-item label="联系人" prop="realName">
        <el-input v-model="form.realName" :disabled="f" placeholder="请输入联系人姓名" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" :disabled="f" placeholder="请输入联系人电话" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" :disabled="f" placeholder="请输入联系人邮箱" />
      </el-form-item>
    </el-form>
    <div style="display: flex;flex-direction: row-reverse;">
      <el-button v-if="!f" :disabled="!canClick" :loading="!canClick" type="primary" @click="submit">保存</el-button>
      <el-button style="margin-right: 20px;" @click="close()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addMonitorAlarmUser, updateMonitorAlarmUser } from '@/api/contactAlarm'

export default {
  name: 'AddCon',
  data() {
    return {
      canClick: true,
      f: false,
      title: '',
      dialogVisible: false,
      form: {
        realName: null,
        phone: null,
        email: null
      },
      rul: {
        realName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { trigger: 'blur', validator: (rule, value, callback) => {
            if (!this.validate.checkPhone(value)) {
              callback(new Error('手机格式错误'))
            } else callback()
          }
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { trigger: 'blur', validator: (rule, value, callback) => {
            if (!this.validate.checkEmail(value)) {
              callback(new Error('邮箱格式错误'))
            } else callback()
          }
          }
        ]
      }
    }
  },
  methods: {
    close() {
      this.f = false
      this.dialogVisible = false
      this.$refs.formRef.resetFields()
    },
    submit() {
      this.$refs.formRef.validate(f => {
        if (f) {
          this.canClick = false
          if (!this.form.id) {
            addMonitorAlarmUser(this.form).then(res => {
              if (res.code === '00000') {
                this.$message.success('新增成功')
                this.close()
                this.$emit('refresh-data')
              }
            }).finally(() => {
              this.canClick = true
            })
          } else {
            updateMonitorAlarmUser({
              id: this.form.id,
              realName: this.form.realName,
              phone: this.form.phone,
              email: this.form.email
            }).then(res => {
              if (res.code === '00000') {
                this.$message.success('修改成功')
                this.close()
                this.$emit('refresh-data')
              }
            }).finally(() => {
              this.canClick = true
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
